import { TComponent } from '@material/typeing';
import $style from './index.scss';
import { FC, ReactNode, useState } from 'react';
import ExpandablePanel from '../expandable-panel';

export interface NavbarProps extends TComponent {
    title?: string;
    left?: ReactNode;
    right?: ReactNode;
    fixed?: boolean;
}
const Navbar: FC<NavbarProps> = function (props) {
    const { title = '反诈助手', children, left, right } = props;
    const [expanded, setExpanded] = useState(false);
    return (
        <ExpandablePanel
            isExpanded={expanded}
            onToggle={() => setExpanded((val) => !val)}
            header={
                <div className={$style.nav}>
                    {left}
                    <div className={$style.title}>{title}</div>
                    {right}
                </div>
            }
        >
            {children}
        </ExpandablePanel>
    );
};

export default Navbar;
